<template>
  <div class="content">
    <div id="meta2d"></div>
  </div>
</template>

<script setup>
import { Meta2d, } from '@meta2d/core';
import { onMounted, ref , onUnmounted } from 'vue';
let meta2d = null;


const open = ()=>{
  let url = '/json/2d.json';
  _fetch(url, function (text) {
    var data = JSON.parse(text);
    data.locked = 1;
    data.rule = false;
    globalThis.userId = data.userId;
    meta2d.open(data);
  });
}

function _fetch(url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      cb && cb(xhr.responseText);
    }
  };
}

const opened = () =>{
  // if(route.query.id&&(route.query.id as string).startsWith('2d')){
    meta2d.fitView(true, 0); //充满屏幕
  // }else{
  //   meta2d.fitSizeView(true, 0); //大屏充满屏幕
  // }
}
onMounted(async () => {
  const options = {
    // width: 1920,
    // height: 1080,
    // background: '#1e2430',
    // color: '#bdc7db',
    background: '#fff',
    color: '#000',
    width:undefined,
    height:undefined
  }
  meta2d = new Meta2d('meta2d',options);
  //注册基本图形库
  // registerBasicDiagram();
  meta2d.on('opened',opened);
  open();
});

onUnmounted(() => {
  meta2d?.off('opened',opened);
  meta2d?.destroy();
});
</script>
<style scoped>
#meta2d {
  position: absolute !important;
  width: 100%;
  height: 100%;
  touch-action: none;
  overflow: hidden;
}
</style>
